<template>
	<view class="body">
		<view class="money">
			<view class="benifit">
				<view class="left">
					<text class="left-1">总金额(元)</text>
					<text class="left-2">0.00</text>
					<view class="left-txt">
						<text class="left-3">今日收益：</text>
						<text class="left-4">0.00</text>
					</view>
				</view>
				<view class="right">
					<image class="right-1" src="../../static/proerty/slices/text.png" mode=""></image>
					<view class="right-txt">
						<text class="right-2">累计收益：</text>
						<text class="right-3">0.00</text>
					</view>
				</view>
			</view>
			<view class="more">
				<view class="more-1">
					<text class="type">活期</text>
					<text class="way">灵活存取</text>
				</view>
				<view class="more-2">
					<text class="type">定期</text>
					<text class="way">稳健收益</text>
				</view>
				<view class="more-3">
					<text class="type">基金</text>
					<text class="way">浮动收益</text>
				</view>
				<view class="more-4">
					<text class="type">黄金</text>
					<text class="way">多元投资</text>
				</view>
			</view>
		</view>
		<view class="out">
			<image class="adversiment" src="../../static/proerty/slices/lun.png" mode=""></image>
		</view>
		<view class="classic">
			<text class="classic-inner">--人气精品--</text>
		</view>
		<view class="products">
			<view class="pro-item">
				<text class="pro-1">国华节节高A款</text>
				<text class="pro-2">5.91%</text>
				<text class="pro-3">历史年化投资回报率</text>
			</view>
			<view class="pro-item">
				<text class="pro-1">宏康小金罐</text>
				<text class="pro-2">3.94%</text>
				<text class="pro-3">灵活资金近30天年华投</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.body{
	width: 100%;
	height: 100vh;
	border: 1rpx solid #CCCCCC;
	background-color: #f3f3f3;
}
.money{
	width: 700rpx;
	height: 540rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin: 40rpx auto;
	padding: 34rpx;
	box-sizing: border-box;
}
.benifit{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.right{
	width: 200rpx;
	height: 174rpx;
}
.left{
	width: 200rpx;
	height: 174rpx;
}
.left-1{
	font-size: 30rpx;
	color: #a8a8a8;
	display: block;
}
.left-2{
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-top: 20rpx;
}
.left-3{
	font-size: 28rpx;
	color: #AEAEAE;
}
.left-4{
	font-size: 28rpx;
}
.right-1{
	width: 40rpx;
	height: 40rpx;
	display: block;
	position: relative;
	left: 145rpx;
}
.right-2{
	font-size: 28rpx;
	color: #AEAEAE;
}
.right-3{
	font-size: 28rpx;
}
.right-txt{
	margin-top: 80rpx;
}
.left-txt{
	margin-top: 25rpx;
}
.more{
	width: 620rpx;
	height: 280rpx;
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
}
.more-1{
	width: 310rpx;
	height: 140rpx;
}
.more-2{
	width: 310rpx;
	height: 140rpx;
}
.more-3{
	width: 310rpx;
	height: 140rpx;
}
.more-4{
	width: 310rpx;
	height: 140rpx;
}
.type{
	font-size: 34rpx;
	display: block;
}
.way{
	font-size: 30rpx;
	color: #AEAEAE;
}
.adversiment{
	width: 700rpx;
	height: 200rpx;
	border-radius: 20rpx;
}
.out{
	margin: 0 auto;
	width: 700rpx;
	height: 200rpx;
}
.classic{
	width: 200rpx;
	height: 50rpx;
	margin: 40rpx auto;
}
.classic-inner{
	font-size: 30rpx;
	color: #acacac;
}
.products{
	width: 700rpx;
	height: 194rpx;
	margin: 20rpx auto;
	display: flex;
	justify-content: space-between;
}
.pro-item{
	width: 340rpx;
	height: 194rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 30rpx;
}
.pro-1{
	font-size: 28rpx;
	display: block;
}
.pro-2{
	font-size: 40rpx;
	color: #F85656;
	display: block;
}
.pro-3{
	font-size: 24rpx;
	color: #ACACAC;
}
</style>
